<template>
  <div :id="widget.id" class="position-full text-align-center flex-justify-center">
    <el-slider v-if="vertical" v-model="state.values.value" :height="`${widget.tempRect.height}px`"
               :min="widget.UI.data.minLimit"
               :max="widget.UI.data.maxLimit"
               :vertical="true" :show-tooltip="false"
               :step="widget.UI.data.divisions" :show-stops="true"
               class="display-inline-block">
    </el-slider>
    <el-slider v-else v-model="state.values.value"
               :show-tooltip="false"
               :min="widget.UI.data.minLimit" :max="widget.UI.data.maxLimit"
               :step="widget.UI.data.divisions" :show-stops="true"
               class="display-inline-block width-100">
    </el-slider>
  </div>
</template>

<script>
  import {mapState} from 'vuex';
  import {formatColor} from '@/utils';
  import {WidgetSlider} from "@/modules/IDE/widget/atom/widgetSlider";

  export default {
    name: 'SliderWidget',
    props: {
      widget: {
        type: WidgetSlider,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {
        vertical: true
      };
    },
    computed: {
      ...mapState({
        activeTheme: state => state.ide.activeTheme,
      }),
      state() {
        if (!this.widget || !this.widget.UI.state) return;
        return this.widget.getCurrentState();
      },
    },
    watch: {
      'widget.UI': {
        handler() {
          this.refreshSlideStatus();
        },
        deep: true,
        immediate:true
      }
    },
    mounted() {
      setTimeout(() => {
        this.refreshSlideStatus();
      });
    },
    methods: {
      refreshSlideStatus() {
        const {trackColor = '', valueColor = '', layout = ''} = this.widget.UI.data;
        this.vertical = layout === 'vertical';
        const container = document.getElementById(this.widget.id);
        if (container) {
          if (trackColor) {
            const trackDom = container.getElementsByClassName(`el-slider__runway`)[0];
            trackDom && (trackDom.style.background = formatColor(trackColor, this.activeTheme));
          }
          if (valueColor) {
            const valueDom = container.getElementsByClassName('el-slider__bar')[0];
            const panelDom = container.getElementsByClassName('el-slider__button')[0];
            valueDom && (valueDom.style.backgroundColor = formatColor(valueColor, this.activeTheme));
            panelDom && (panelDom.style.borderColor = formatColor(valueColor, this.activeTheme));
          }
        }
      },
    }
  };
</script>

<style scoped lang="less">

</style>
